<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Mosaddek">
    <meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
    <link rel="shortcut icon" href="img/favicon.png">

    <title>南牧物联网云平台</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-reset.css" rel="stylesheet">
    <!--external css-->
    <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
	<link href="assets/morris.js-0.4.3/morris.css" rel="stylesheet" />
    <link href="assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"/>
    <link rel="stylesheet" href="css/owl.carousel.css" type="text/css">

      <!--right slidebar-->
      <link href="css/slidebars.css" rel="stylesheet">

    <!-- Custom styles for this template -->

    <link href="css/style.css" rel="stylesheet">
    <link href="css/style-responsive.css" rel="stylesheet" />



    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

  <section id="container" >
      <!--header start-->
      <header class="header white-bg">
              <div class="sidebar-toggle-box">
                  <div class="fa fa-bars tooltips" data-placement="right" data-original-title="Toggle Navigation"></div>
              </div>
            <!--logo start-->
            <a href="index.html" class="logo"><img alt="" src="img/logo1.png" style="width:80px"><!-- <span>南牧物联网云平台</span> --></a>
            <!--logo end-->
			
            <div class="top-nav ">
                <!--search & user info start-->
                <ul class="nav pull-right top-menu">
                    <!-- <li>
                        <input type="text" class="form-control search" placeholder="Search">
                    </li> -->
                    <!-- user login dropdown start-->
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <img alt="" src="img/avatar1_small.jpg">
                            <span class="username">张三</span>
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu extended logout">
                            <div class="log-arrow-up"></div>
                            <li><a href="#"><i class=" fa fa-suitcase"></i>我的资料</a></li>
                            <li><a href="#"><i class="fa fa-cog"></i> 设置</a></li>
                            <li><a href="#"><i class="fa fa-bell-o"></i> 我的消息</a></li>
                            <li><a href="login.html"><i class="fa fa-key"></i> 注销</a></li>
                        </ul>
                    </li>
                    <!-- <li class="sb-toggle-right">
                        <i class="fa  fa-align-right"></i>
                    </li> -->
                    <!-- user login dropdown end -->
                </ul>
                <!--search & user info end-->
            </div>
			
			<div class="nav notify-row" id="top_menu">
                <!--  notification start -->
                <ul class="nav top-menu">

                    <!-- notification dropdown start-->
                    <li id="header_notification_bar" class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">

                            <i class="fa fa-bell-o"></i>
                            <span class="badge bg-warning">7</span>
                        </a>
                        <ul class="dropdown-menu extended notification">
                            <div class="notify-arrow notify-arrow-yellow"></div>
                            <li>
                                <p class="yellow">You have 7 new notifications</p>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-danger"><i class="fa fa-bolt"></i></span>
                                    Server #3 overloaded.
                                    <span class="small italic">34 mins</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-warning"><i class="fa fa-bell"></i></span>
                                    Server #10 not respoding.
                                    <span class="small italic">1 Hours</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-danger"><i class="fa fa-bolt"></i></span>
                                    Database overloaded 24%.
                                    <span class="small italic">4 hrs</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-success"><i class="fa fa-plus"></i></span>
                                    New user registered.
                                    <span class="small italic">Just now</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-info"><i class="fa fa-bullhorn"></i></span>
                                    Application error.
                                    <span class="small italic">10 mins</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">See all notifications</a>
                            </li>
                        </ul>
                    </li>
                    <!-- notification dropdown end -->
                </ul>
                <!--  notification end -->
            </div>
        </header>
      <!--header end-->
      <!--sidebar start-->
      <aside>
          <div id="sidebar"  class="nav-collapse ">
              <!-- sidebar menu start-->
              <ul class="sidebar-menu" id="nav-accordion">
				  <li>
                      <a class="active" href="index.html">
                          <i class="fa fa-dashboard"></i>
                          <span>养殖场</span>
                      </a>
                  </li>
                  <li class="sub-menu">
                      <a href="javascript:;" >
                          <i class="fa fa-table"></i>
                          <span>历史数据</span>
                      </a>
                      <ul class="sub">
						  <li><a href="tem_history.html"><span class="title">温湿度</span></a></li>
						  <li><a href="water_history.html"><span class="title">耗水量</span></a></li>
						  <li><a href="light_history.html"><span class="title">光照度</span></a></li>
						  <li><a href="gas_history.html"><span class="title">氨气浓度</span></a></li>
						  <li><a href="food_history.html"><span class="title">饲料量</span></a></li>
						  <li><a href="alarm_history.html"><span class="title">告警记录</span></a></li>
                      </ul>
                  </li>
                  <li class="sub-menu">
                      <a href="javascript:;" >
                          <i class="fa fa-tasks"></i>
                          <span>设备管理</span>
                      </a>
                      <ul class="sub">
                          <li><a href="device1.html"><span class="title">设备管理</span></a></li>
                      </ul>
                  </li>
                  <li class="sub-menu">
                      <a href="javascript:;" >
                          <i class="fa fa-user"></i>
                          <span>用户管理</span>
                      </a>
                      <ul class="sub">
                          <li><a href="profile.html"><span class="title">我的资料</span></a></li>
						  <li><a href="user.html"><span class="title">用户管理(admin)</span></a></li>
						  <li><a href="function:html"><span class="title">页面管理(admin)</span></a></li>
						  <li><a href="permission.html"><span class="title">权限管理(admin)</span></a></li>
						  <li><a href="javascript:void();"><span class="title">养殖场主管理(admin)

</span></a></li>
						  <li><a href="javascript:void();"><span class="title">养殖户管理(admin)</span></a></li>
                      </ul>
                  </li>
                  <li class="sub-menu">
                      <a href="javascript:;" >
                          <i class=" fa fa-gear"></i>
                          <span>系统(admin)</span>
                      </a>
                      <ul class="sub">
                          <li><a href="log.html"><span class="title">系统日志</span></a></li>
                      </ul>
                  </li>


                  <li>
                      <a  href="javascript:;">
                          <i class="fa fa-file"></i>
                          <span>系统说明</span>
                      </a>
                  </li>

                  

              </ul>
              <!-- sidebar menu end-->
          </div>
      </aside>
      <!--sidebar end-->
	  
	  
      <!--main content start-->
      <section id="main-content">
          <section class="wrapper" >
			  <div class="row">
			      
				  <div class="col-lg-2">
					  <section class="panel">
                          <!-- <header class="panel-heading ">
                              栏舍
                          </header> -->
                          <div class="list-group">
                              <a class="list-group-item  " href="house.html"><i class="fa fa-th"></i>栏舍1</a>
                              <a class="list-group-item " href="house1.html"><i class="fa fa-th"></i>栏舍2</a>
                              <a class="list-group-item " href="house2.html"><i class="fa fa-th"></i>栏舍3</a>
                              <a class="list-group-item active" href="house3.html"><i class="fa fa-th"></i>栏舍4</a>
                              <a class="list-group-item " href="house4.html"><i class="fa fa-th"></i>栏舍5</a>
                          </div>
                      </section>
				  </div>
				  <div class="col-lg-6">
						<div class="row">
							<section class="panel">
								<video controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="100%" height="100%" style="display: block">
										<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
										<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
										<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
										<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="100%" height="100%">
												<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
												<param name="allowFullScreen" value="true" />
												<param name="wmode" value="transparent" />
												<param name="flashVars" value="config={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':false}]}" />
												<img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="100%" height="100%" title="No video playback capabilities, please download the video below" />
										</object>
								</video>
							</section>
						</div>
						
						<div class="row">
							<section class="panel">
								<header class="panel-heading">
									  环境控制器
								  </header>
								<button style="margin:4px" class="btn btn-primary btn-shadow"><i class="fa fa-2x  fa-asterisk">风机1</i></button>
								<button style="margin:4px" class="btn btn-primary btn-shadow"><i class="fa fa-2x  fa-asterisk">风机1</i></button>
								 <button style="margin:4px" class="btn btn-shadow btn-primary"><i class="fa fa-2x fa-asterisk">风机2</i></button>
								  <button style="margin:4px" class="btn btn-default btn-shadow"><i class="fa fa-2x  fa-asterisk">风机3</i></button>
								  <button style="margin:4px" class="btn btn-primary btn-shadow"><i class="fa fa-2x  fa-asterisk">风机4</i></button>
								  <button style="margin:4px" class="btn btn-primary btn-shadow"><i class="fa fa-2x  fa-asterisk">风机5</i></button>
								  <button style="margin:4px" class="btn btn-primary btn-shadow"><i class="fa fa-2x  fa-asterisk">风机6</i></button>
								  <button style="margin:4px" class="btn btn-default btn-shadow"><i class="fa fa-2x  fa-asterisk">风机7</i></button>
								  <button style="margin:4px" class="btn btn-primary btn-shadow"><i class="fa fa-2x  fa-asterisk">风机8</i></button>
								  <button style="margin:4px" class="btn btn-primary btn-shadow"><i class="fa fa-2x  fa-asterisk">变频风机</i></button>
								  <button style="margin:4px" class="btn btn-default btn-shadow"><i class="fa fa-2x fa-certificate">光照1</i></button>
								  <button style="margin:4px" class="btn btn-primary btn-shadow"><i class="fa fa-2x fa-certificate">光照2</i></button>
								  <button style="margin:4px" class="btn btn-primary btn-shadow"><i class="fa fa-2x fa-certificate">可调光照</i></button>
								  <button style="margin:4px" class="btn btn-primary btn-shadow"><i class="fa fa-2x fa-barcode">卷帘1</i></button>
								  <button style="margin:4px" class="btn btn-primary btn-shadow"><i class="fa fa-2x fa-barcode">卷帘2</i></button>
								  <button style="margin:4px" class="btn btn-primary btn-shadow"><i class="fa fa-2x fa-barcode">卷帘3</i></button>
								  <button style="margin:4px" class="btn btn-primary btn-shadow"><i class="fa fa-2x fa-barcode">卷帘4</i></button>
								  <button style="margin:4px" class="btn btn-primary btn-shadow"><i class="fa fa-2x fa-eraser">侧窗</i></button>
								  <button style="margin:4px" class="btn btn-primary btn-shadow"><i class="fa fa-2x fa-eraser">幕帘</i></button>
							</section>
						</div>
						
						<div class="row">
							<section class="panel">
								<header class="panel-heading">
									  料线控制器
								  </header>
								
							</section>
						</div>
						
						<div class="row">
							<section class="panel">
								<header class="panel-heading">
									  母猪饲喂器
								  </header>
								
							</section>
						</div>
						
				  </div>
				  
				  <div class="col-lg-4">
						<div class="row">
							
						</div>
						<section class="panel" >
							<header class="panel-heading tab-bg-dark-navy-blue " >
                              <ul class="nav nav-tabs">
                                  <li class="active">
                                      <a data-toggle="tab" href="#tab1">环境控制器</a>
                                  </li>
                                  <li class="">
                                      <a data-toggle="tab" href="#tab2">料线饲喂器</a>
                                  </li>
                                  <li class="">
                                      <a data-toggle="tab" href="#tab3">母猪饲喂器</a>
                                  </li>
                              </ul>
                            </header>
							<div class="panel-body" >
								<div class="tab-content">
									<div id="tab1" class="tab-pane active" >
										<div class="row">
											<section class="panel">
											  <div class="panel-body">

											  </div>
											  <table class="table table-hover personal-task">
												  <tbody>
													<tr>
														<td><a href="device_detail_1.html">环境控制器1</a></td>
														<td><a href="device_detail_1.html"><i class="fa fa-2x fa-gear"></i></a></td>
													</tr>
													<tr>
														<td>设备类型</td>
														<td> NM820</td>
													</tr>
													<tr>
														<td>设备地址</td>
														<td> 42000000</td>
													</tr>
													<tr>
														<td>当前日龄</td>
														<td> 002</td>
													</tr>
													<tr>
														<td>设备状态</td>
														<td><span class="label label-primary pull-right r-activity">在线</span></td>
													</tr>
													<tr>
														<td>舍内平均温度</td>
														<td><span class="label label-primary pull-right r-activity">23℃</span></td>
													</tr>
													<tr>
														<td>当日目标温度</td>
														<td><span class="label label-primary pull-right r-activity">23℃</span></td>
													</tr>
													<tr>
														<td>湿度</td>
														<td><span class="label label-primary pull-right r-activity">88.6%</span></td>
													</tr>
													<tr>
														<td>氨气</td>
														<td><span class="label label-primary pull-right r-activity">99.9 ppm</span></td>
													</tr>
													<tr>
														<td>通风类型</td>
														<td><span class="label label-primary pull-right r-activity">隧道通风</span></td>
													</tr>
													<tr>
														<td>温控方式</td>
														<td><span class="label label-primary pull-right r-activity">曲线</span></td>
													</tr>
												  </tbody>
											  </table>
										  </section>
											<!-- <section class="panel">
												  <header class="panel-heading">
													  最近数据
												  </header>
												  <table class="table table-striped table-advance table-hover">
													  <thead>
													  <tr>
														  <th>日龄</th>
														  <th class="hidden-phone">时</th>
														  <th>舍外温度(℃)</th>
														  <th>舍内温度(℃)</th>
														  <th>舍内湿度(%)</th>
														  <th>舍外湿度(%)</th>
														  <th>耗水量</th>
														  <th>总耗量</th>
														  <th>光照强度</th>
														  <th>氨气浓度</th>

													  </tr>
													  </thead>
													  <tbody>
													  <tr>
														  <td><span class="label label-primary label-mini">002</span></td>
														  <td>10</td>
														  <td class="hidden-phone">31</td>
														  <td>24</td>
														  <td>55</td>
														  <td>56</td>
														  <td>0002.000</td>
														  <td>0002.000</td>
														  <td>323.2</td>
														  <td>10.3</td>
													  </tr>
													  
													  <tr>
														  <td><span class="label label-primary label-mini">002</span></td>
														  <td>9</td>
														  <td class="hidden-phone text-danger">30</td>
														  <td class="hidden-phone text-danger">34</td>
														  <td class="hidden-phone text-danger">99</td>
														  <td class="hidden-phone text-danger">99</td>
														  <td>0002.000</td>
														  <td>0002.000</td>
														  <td>323.2</td>
														  <td>10.3</td>
													  </tr>
													  
													  <tr>
														  <td><span class="label label-primary label-mini">002</span></td>
														  <td>8</td>
														  <td class="hidden-phone">31.5</td>
														  <td>24</td>
														  <td>55</td>
														  <td>56</td>
														  <td>0002.000</td>
														  <td>0002.000</td>
														  <td>323.2</td>
														  <td>10.3</td>
													  </tr>
													  
													  <tr>
														  <td><span class="label label-primary label-mini">002</span></td>
														  <td>7</td>
														  <td class="hidden-phone">29</td>
														  <td>23.9</td>
														  <td>55</td>
														  <td>56</td>
														  <td>0002.000</td>
														  <td>0002.000</td>
														  <td>323.2</td>
														  <td>10.3</td>
													  </tr>
													  
													  <tr>
														  <td><span class="label label-primary label-mini">002</span></td>
														  <td>6</td>
														  <td class="hidden-phone">28</td>
														  <td>24.1</td>
														  <td>55</td>
														  <td>56</td>
														  <td>0002.000</td>
														  <td>0002.000</td>
														  <td>323.2</td>
														  <td>10.3</td>
													  </tr>

													  </tbody>
												  </table>
												  <ul class="pagination pagination-sm pull-right">
													  <li><a href="#">«</a></li>
													  <li><a href="#">1</a></li>
													  <li><a href="#">2</a></li>
													  <li><a href="#">3</a></li>
													  <li><a href="#">4</a></li>
													  <li><a href="#">5</a></li>
													  <li><a href="#">»</a></li>
												  </ul>
											  </section> -->
										</div>
										
										<div class="row">
										  <div class="col-lg-12">
											  <section class="panel">
												  <header class="panel-heading">
													  温度趋势
												  </header>
												  <div class="panel-body">
													  <div id="id-tem" style="height:400px;"></div>
												  </div>
											  </section>
										  </div>
									  </div>
									  
									  <div class="row">
										  <div class="col-lg-12">
											  <section class="panel">
												  <header class="panel-heading">
													  湿度趋势
												  </header>
												  <div class="panel-body">
													  <div id="id-wet" style="height:400px;"></div>
												  </div>
											  </section>
										  </div>
									  </div>
									  
									  <div class="row">
										  <div class="col-lg-12">
											  <section class="panel">
												  <header class="panel-heading">
													  耗水趋势
												  </header>
												  <div class="panel-body">
													  <div id="id-water" style="height:400px;"></div>
												  </div>
											  </section>
										  </div>
									  </div>
									  
									</div>
									<div id="tab2" class="tab-pane">待完善</div>
                                    <div id="tab3" class="tab-pane">待完善</div>
								</div>
							</div>
						</section>
				  </div>
			  </div>
			  
			  
			  
			  
          </section>
      </section>
      <!--main content end-->

      <!-- Right Slidebar start -->
      <!-- Right Slidebar end -->

      <!--footer start-->
      <footer class="site-footer">
          <div class="text-center">
              2017 &copy; 
              <a href="#" class="go-top">
                  <i class="fa fa-angle-up"></i>
              </a>
          </div>
      </footer>
      <!--footer end-->
	  
	  <!--model-->
	  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
		  <div class="modal-dialog">
			  <div class="modal-content">
				  <div class="modal-header">
					  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					  <h4 class="modal-title">CCTV</h4>
				  </div>
				  <div class="modal-body">
					  <div id="id-cctv" style="height:480px;" class="bg-info"></div>
				  </div>
				  <div class="modal-footer">
					  <button data-dismiss="modal" class="btn btn-danger" type="button">关闭</button>
					  <!-- <button class="btn btn-success" type="button">Save changes</button> -->
				  </div>
			  </div>
		  </div>
	  </div>
	  
  </section>

    <!-- js placed at the end of the document so the pages load faster -->
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script class="include" type="text/javascript" src="js/jquery.dcjqaccordion.2.7.js"></script>
    <script src="js/jquery.scrollTo.min.js"></script>
    <script src="js/jquery.nicescroll.js" type="text/javascript"></script>
    <script src="js/jquery.sparkline.js" type="text/javascript"></script>
    <script src="assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js"></script>
    <script src="js/owl.carousel.js" ></script>
    <script src="js/jquery.customSelect.min.js" ></script>
	<script src="assets/morris.js-0.4.3/morris.min.js" type="text/javascript"></script>
    <script src="assets/morris.js-0.4.3/raphael-min.js" type="text/javascript"></script>
    <script src="js/respond.min.js" ></script>

    <!--right slidebar-->
    <script src="js/slidebars.min.js"></script>

    <!--common script for all pages-->
    <script src="js/common-scripts.js"></script>

	<!-- 引入 echarts.js -->
    <script src="assets/echart/echarts.js"></script>
	<script src="assets/echart/macarons.js"></script>
	<script src="assets/echart/china.js"></script>
	
    <!--script for this page-->
    <script src="js/sparkline-chart.js"></script>
    <script src="js/easy-pie-chart.js"></script>
	<script src="js/count.js"></script>
	<script src="js/echart.js"></script>

	

  <script>

      //owl carousel

      $(document).ready(function() {
          $("#owl-demo").owlCarousel({
              navigation : true,
              slideSpeed : 300,
              paginationSpeed : 400,
              singleItem : true,
			  autoPlay:true

          });
		  
		  var temChart = echarts.init(document.getElementById('id-tem'),'macarons');
		  var wetChart = echarts.init(document.getElementById('id-wet'),'macarons');
		  var waterChart = echarts.init(document.getElementById('id-water'),'macarons');
		  
			option = {

				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data:['舍外','舍内']
				},
				toolbox: {
					show: true,
					feature: {
						dataZoom: {
							yAxisIndex: 'none'
						},
						dataView: {readOnly: false},
						magicType: {type: ['line', 'bar']},
						restore: {},
						saveAsImage: {}
					}
				},
				xAxis:  {
					type: 'category',
					//name:'舍外',
					boundaryGap: false,
					data: ['日龄002 10时','日龄002 9时','日龄002 8时','日龄002 7时','日龄002 6时','日龄002 5时','日龄002 4时']
				},
				yAxis: {
					type: 'value',
					axisLabel: {
						formatter: '{value} °C'
					}
				},
				series: [
					{
						name:'舍外',
						type:'line',
						data:[31, 34, 31.5, 29, 28, 27, 24],
						markPoint: {
							data: [
								{type: 'max', name: '最大值'},
								{type: 'min', name: '最小值'}
							]
						},
						markLine: {
							data: [
								{type: 'average', name: '平均值'}
							]
						}
					},
					{
						name:'舍内',
						type:'line',
						data:[24, 30, 24, 23.9, 24.1, 22.5, 21],
						markPoint: {
							data: [
								{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
							]
						},
						markLine: {
							data: [
								{type: 'average', name: '平均值'},
								[{
									symbol: 'none',
									x: '90%',
									yAxis: 'max'
								}, {
									symbol: 'circle',
									label: {
										normal: {
											position: 'start',
											formatter: '最大值'
										}
									},
									type: 'max',
									name: '最高点'
								}]
							]
						}
					}
				]
			};

			
			optionWet = {

				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data:['舍外','舍内']
				},
				toolbox: {
					show: true,
					feature: {
						dataZoom: {
							yAxisIndex: 'none'
						},
						dataView: {readOnly: false},
						magicType: {type: ['line', 'bar']},
						restore: {},
						saveAsImage: {}
					}
				},
				xAxis:  {
					type: 'category',
					//name:'舍外',
					boundaryGap: false,
					data: ['日龄002 10时','日龄002 9时','日龄002 8时','日龄002 7时','日龄002 6时','日龄002 5时','日龄002 4时']
				},
				yAxis: {
					type: 'value',
					axisLabel: {
						formatter: '{value} %'
					}
				},
				series: [
					{
						name:'舍外',
						type:'line',
						data:[55, 99, 55, 55, 55, 55, 55],
						markPoint: {
							data: [
								{type: 'max', name: '最大值'},
								{type: 'min', name: '最小值'}
							]
						},
						markLine: {
							data: [
								{type: 'average', name: '平均值'}
							]
						}
					},
					{
						name:'舍内',
						type:'line',
						data:[56, 99, 56, 56.9, 56.1, 56.5, 56],
						markPoint: {
							data: [
								{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
							]
						},
						markLine: {
							data: [
								{type: 'average', name: '平均值'},
								[{
									symbol: 'none',
									x: '90%',
									yAxis: 'max'
								}, {
									symbol: 'circle',
									label: {
										normal: {
											position: 'start',
											formatter: '最大值'
										}
									},
									type: 'max',
									name: '最高点'
								}]
							]
						}
					}
				]
			};
			
			optionWater = {
				tooltip : {
					trigger: 'axis'
				},
				legend: {
					data:['耗水量','总耗量']
				},
				toolbox: {
					show: true,
					feature: {
						dataZoom: {
							yAxisIndex: 'none'
						},
						dataView: {readOnly: false},
						magicType: {type: ['line', 'bar']},
						restore: {},
						saveAsImage: {}
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis : [
					{
						type : 'category',
						boundaryGap : false,
						data: ['日龄002 10时','日龄002 9时','日龄002 8时','日龄002 7时','日龄002 6时','日龄002 5时','日龄002 4时']
					}
				],
				yAxis : [
					{
						type : 'value'
					}
				],
				series : [
					{
						name:'耗水量',
						type:'line',
						stack: '总量',
						areaStyle: {normal: {}},
						data:[2, 2, 2, 2, 2, 2, 2]
					},
					{
						name:'总耗量',
						type:'line',
						stack: '总量',
						areaStyle: {normal: {}},
						data:[2, 4, 6, 8, 10, 12, 14]
					}
				]
			};

		  temChart.setOption(option);wetChart.setOption(optionWet);waterChart.setOption(optionWater);
		  
		  $(window).resize(function(){
			temChart.resize();wetChart.resize();waterChart.resize();
          }); 
      });

      //custom select box

      $(function(){
          $('select.styled').customSelect();
      });

  </script>

  </body>
</html>
